<template>
  <view class="card-item" @click="jumpRouter">
    <image :src="content.image" mode=""></image>
    <view class="update-time-box">
      {{Math.floor((now - content.updateTime) / (24*3600*1000))}}天前更新
    </view>
    <view class="type">{{content.type}}</view>
  </view>
</template>

<script setup>
	
	const now = Date.now()


  const props = defineProps({
    content: {
      type: Object,
      validator: (value) => {
        return value.hasOwnProperty('image') && value.hasOwnProperty('updateTime')&& value.hasOwnProperty(
          'typeId') && value.hasOwnProperty('type')
      },
      default: () => ({
        image: 'https://mp-0cb878b7-99ec-44ea-8246-12b123304b05.cdn.bspapp.com/xxmBizhi/20240307/1709822515259_2.jpg',
        updateTime: Date.now(),
        typeId: 1,
        type: '可爱萌宠'
      })
    }
  })
  
  
  const jumpRouter = () => {
    uni.navigateTo({
      url: `/pages/classifyDetail/classifyDetail?id=${props.content.typeId}&name=${props.content.type}`,
	  
    })
  }
</script>

<style lang="scss" scoped>
  .card-item {
    width: 225rpx;
    height: 345rpx;
    border-radius: 10rpx;
    overflow: hidden;
    position: relative;

    .update-time-box {
      position: absolute;
      left: 0rpx;
      top: 0rpx;
      padding: 8rpx;
      border-radius: 24rpx 0 24rpx 0;
      background: #ED9D7C;
      color: #fff;
      font-size: 20rpx;
    }

    .type {
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 70rpx;
      font-size: 28rpx;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(0, 0, 0, .3);
      backdrop-filter: blur(10px);
    }

    image {
      width: 100%;
      height: 100%;
    }
  }
</style>